<template>
  <div>
      <ul>
        <li v-if="item.type=='未借出'" :class="[arr.includes(item.id)?'active':'']" @click="itemClick(item)" v-for="(item, index) in lists" :key="index">{{item.bookName}}</li>
      </ul>
      <div style="padding-left:40px;">
        <button @click="chooseBookOk" type="button" class="btn btn-success">确定</button>
      </div>
  </div>
</template>


<script>
import {mapState, mapActions, mapMutations} from 'vuex'
import Pagination from '../../components/pagination/Pagination.vue'
export default {
    data(){
      return {
        arr: [],
        cacheArr: []
      }
    },
    computed: {
      ...mapState({
        lists: state => state.book.bookLists,
        choBookList: state => state.book.choBookList
      })
    },
    methods: {
      ...mapActions([
        'getBookList'
      ]),
      ...mapMutations([
        'setChoBook'
      ]),
      itemClick(item){
        if(this.arr.includes(item.id)){
          this.arr = this.arr.filter(val => {
            return val != item.id;
          });
          this.cacheArr = this.cacheArr.filter(val => {
            return val.id != item.id;
          });
        }else{
          this.arr.push(item.id)
          this.cacheArr.push(item)
        };

      },
      chooseBookOk(){
        this.setChoBook(this.cacheArr);
        this.$router.push('/home/user/form');
      }
    },
    components: {
      Pagination
    },
    mounted () {
      let type = this.$route.params.bookType || '';
      this.getBookList(type);

      if(this.choBookList.length > 0){
          this.cacheArr = this.choBookList;
          this.arr = this.choBookList.map((val,key)=>{
          return val.id
        });
      };
      
    }
}
</script>


<style scoped>
  ul li {
    list-style: none;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    text-indent: 10px;
    border-radius: 3px;
    margin-bottom: 3px;
    cursor: pointer;

  }
  .active {
    border:  1px solid red;
  }
</style>
